<div>
  <div class="node-item pl3 rounded border-box"
      [ngClass]="{'node-item-selected': selected, changed: viewState.nodeIsChanged(node)}"
      (mouseout)="onMouseOut($event)"
      (mouseover)="onMouseOver($event)"
      (dblclick)="onDblClick($event)"
      (click)="onClick($event)">
    <div
      [ngClass]="{
        expander: true,
        rotate90: !expanded,
        transparent: node.children == null || node.children.length === 0
      }"
      (click)="onToggleExpand($event)">
    </div>
    <div class="inline">
      <node-open-tag [node]="node" [hasChildren]="hasChildren"></node-open-tag>
    </div>
  </div>

  <div class="border-box pl4" *ngIf="expanded && hasChildren">
    <bt-node-item *ngFor="let node of node.children; trackBy: trackById"
      [node]="node"
      [level]="level + 1"
      (selectNode)="selectNode.emit($event)"
      (inspectElement)="inspectElement.emit($event)"
      (collapseChildren)="collapseChildren.emit($event)"
      (expandChildren)="expandChildren.emit($event)">
    </bt-node-item>
  </div>
</div>
